// import React, { PureComponent } from "react";
import React, { Component } from "react";
import Child from "./Child";
// 只有类组件可以定义自己的生命周期
// 函数组件是没有生命周期

// 16.3版本做了更新
// PureComponent用于代替shouldComponentUpdate,意味这如果没有状态发生改变，就会自动地取消更新
class App extends Component {
  //! 1. 初始化阶段
  // constructor就是初始化阶段的生命周期
  // constructor是当类被实例化的时候，就是自动执行的，并且是最先执行的
  // constructor是可以接受一个参数是props
  constructor(props) {
    // 必须要先调用super
    super(props);
    console.log("constructor");
    this.state = {
      count: 10,
      msg: props.title,
      list: [],
    };
    // this.ipt = createRef();
    // this.handleClick = this.handleClick.bind(this);
  }

  //! 2. 挂载阶段
  // 相当于挂载前，beforeMount
  // 这个生命周期现在已经被废弃了
  // 如果想用，前面要加UNSAFE_
  UNSAFE_componentWillMount() {
    // 在这里是不能请求数据的
    // 因为有fiber算法，可能会使这个数据请求执行多次
    console.log("componentWillMount");
    // this.setState({
    //   msg: "hi",
    // });
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //   });
  }

  // render也是挂载阶段的一个生命周期
  // render一定要返回一个jsx
  // render不能做数据请求，fiber算法的原因, render不仅仅是挂载的时候执行，更新的时候还会执行
  render() {
    console.log("render");
    const { count, list } = this.state;
    const { title } = this.props;
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     this.setState({
    //       list: res.result,
    //     });
    //   });
    return (
      <>
        <h2>16.3版本以前的生命周期</h2>
        <p>{title}</p>
        <p>{count}</p>
        <ul>
          {list.map((item) => (
            <li key={item._id}>{item.title}</li>
          ))}
        </ul>
        <Child count={this.state.count} />
      </>
    );
  }

  // 挂载阶段的最后一个生命周期，表示挂载结束, 相当于mounted
  componentDidMount() {
    console.log("componentDidMount");
    // 这里面就什么都能做了
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     this.setState({
    //       list: res.result,
    //     });
    //   });

    setTimeout(() => {
      this.setState({
        count: 10,
      });
    }, 3000);
  }

  //! 3. 更新阶段
  // state的更新
  // 是否允许组件更新
  // 两个参数，分别表示新的props和新的state
  // 重要：性能优化
  // shouldComponentUpdate(nextProps, nextState) {
  //   // 必须要返回一个true或者false
  //   console.log("shouldComponentUpdate");
  //   // return false;
  //   // if (nextState.count === this.state.count) {
  //   //   return false;
  //   // } else {
  //   //   return true;
  //   // }
  //   return nextState.count !== this.state.count;
  // }

  // 更新前,也是被废弃了
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate");
  }

  // 更新后
  componentDidUpdate() {
    console.log("componentDidUpdate");
    // 可以拿到更新以后的值
    // console.log(this.state.count);
    // 不要在这里去更改数据,可能会造成死循环
  }

  //! 4.销毁阶段
  // 组件被销毁的时候调用
  componentWillUnmount() {
    console.log("componentWillUnmount");
    // 关闭定时器，关闭websocket，解除js的事件监听，卸载第三方插件
  }
}

export default App;
